<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        :root {
            box-sizing: border-box;
        }

        *, ::before, ::after {
            box-sizing: inherit;
        }

        body {
            background-color: #eee;
            font-family: Arial, Helvetica, sans-serif;
        }

        body * + * {
            margin-top: 1.5em;
        }

        header {
            padding: 1em 1.5em;
            color: #fff;
            background-color: #0072b0;
            border-radius: .5em;
            margin-bottom: 1.5em;
        }

        .main {
            padding: 0 1.5em;
            background-color: #fff;
            border-radius: .5em;
        }

        .container {
            /* 设置最大宽度,同时设置左右边距为auto,让内层容器自动填充可用空间,实现水平居中的效果 */
            max-width: 1080px;
            margin: 0 auto;
        }

        .media {
            float: left;
            /* 每个媒体元素底部和右部添加外边距 */
            margin: 0 1.5em 1.5em 0;
            /* width: 50%; */
            /* 使用calc计算width,防止溢出 */
            width: calc(50% - 1.5em);
            padding: 1.5em;
            background-color: #eee;
            border-radius: .5em;
        }
        /* 清除浮动, display block有外边距折叠的效果,所以可以使用display table.因为table没有外边距属性,就不会引起外边距折叠*/
        .clearfix ::after {
            display: table;
            content: '';
            clear: both;
        }

        /* 清楚奇数行的浮动,保证每行都是2列 */
        .media:nth-child(odd) {
            clear: left;
        }

        .media-image {
            float: left;
            /* 图片添加外边距 */
            margin-right: 1.5em;
        }

        /* 覆盖猫头鹰选择器设置的顶部外边距 */
        .media-body {
            /* 创建BFC,正文不会和图片重叠 */
            overflow: auto;
            margin-top: 0;
        }

        /* 覆盖h4标签本身自带的上外边距 */
        .media-body h4 {
            margin-top: 0;
        }

    </style>
</head>
<body>
    <div class="container">
        <header>
            <h1>'Franklin Running Club'</h1>
        </header>
        <main class="main clearfix">
            <h2>'Running tips'</h2>
            <div>
                <div class="media">
                    <img src="http://img.duoziwang.com/2016/09/15/1718061373.jpg" alt="" class="media-image">
                    <div class="media-body">
                        <h4>Strength</h4>
                        <p>1新华社北京4月6日电 为配合在全党深入开展的学习贯彻习近平新时代中国特色社会主义思想主题教育，中共中央党史和文献研究院、中央学习贯彻习近平新时代中国特色社会主义思想主题教育领导小组办公室联合编辑了《习近平新时代中国特色社会主义思想专题摘编》，已由中央文献出版社、党建读物出版社出版，即日起在全国发行</p>
                    </div>
                </div>
                <div class="media">
                    <img src="http://img.duoziwang.com/2016/09/15/1718061373.jpg" alt="" class="media-image">
                    <div class="media-body">
                        <h4>Strength</h4>
                        <p>2新华社北京4月6日电 为配合在全党深入开展的学习贯彻习近平新时代中国特色社会主义思想主题教育，中共中央党史和文献研究院、中央学习贯彻习近平新时代中国特色社会主义思想主题教育领导小组办公</p>
                    </div>
                </div>
                <div class="media">
                    <img src="http://img.duoziwang.com/2016/09/15/1718061373.jpg" alt="" class="media-image">
                    <div class="media-body">
                        <h4>Strength</h4>
                        <p>3新华社北京4月6日电 为配合在全党深入开展的学习贯彻习近平新时代中国特色社会主义思想主题教育，中共中央党史和文献研究院、中央学习贯彻习近平新时代中国特色社会主义思想主题教育领导小组办公室联合编辑了《习近平新时代中国特色社会主义思想专题摘编》，已由中央文献出版社、党建读物出版社出版，即日起在全国发行</p>
                    </div>
                </div>
                <div class="media">
                    <img src="http://img.duoziwang.com/2016/09/15/1718061373.jpg" alt="" class="media-image">
                    <div class="media-body">
                        <h4>Strength</h4>
                        <p>4新华社北京4月6日电 为配合在全党深入开展的学习贯彻习近平新时代中国特色社会主义思想主题教育，中共中央党史和文献研究院、中央学习贯彻习近平新时代中国特色社会主义思想主题教育领导小组办公室联合编辑了《习近平新时代中国特色社会主义思想专题摘编》，已由中央文献出版社、党建读物出版社出版，即日起在全国发行</p>
                    </div>
                </div>
            </div>
        </main>
    </div>
</body>
</html>